<template>
    <div class="dataContainer">
      <!-- Search start -->
      <el-form :inline="true" size="small" :model="queryParams" class="demo-form-inline searchContainer" >
        <el-form-item label="合约代码: ">
            <el-input v-model="queryParams.instrumentCode" placeholder="请输入合约代码"  @keyup.enter="onSearch"  style="width: 180px;"/>
        </el-form-item>
        <!-- <el-form-item label="状态: ">
            <el-select v-model="queryParams.status" placeholder="请输入状态" collapse-tags clearable  style="width: 180px">
                <el-option label="已驳回" :value="-2" />
                <el-option label="已撤销" :value="-1" />
                <el-option label="待审核" :value="0" />
                <el-option label="已通过" :value="1" />
            </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button class="bs-form-btn" size="small" type="primary" @click="onSearch" ><el-icon><Search /></el-icon>查 询</el-button>
          <ResetButton :queryParams="queryParams"/>
          <el-button size="small" type="primary" @click="openAddModal"><el-icon><Plus /></el-icon>新增 </el-button>
          <el-button  size="small" type="primary"  @click="approvalBatch" :disabled="approvalList.length == 0 ">
            <svg t="1762217611172" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4961" width="1em" height="1em"><path d="M209.493333 640H31.317333V533.333333a85.333333 85.333333 0 0 1 85.333334-85.333333h170.666666V306.688A160 160 0 1 1 505.429333 116.906667a256 256 0 0 0-18.346666 437.76H330.837333a128.853333 128.853333 0 0 0-121.344 85.333333z m-7.509333 64V768h-170.666667v-64h170.666667z m537.6-35.584H938.666667a85.333333 85.333333 0 0 1 85.333333 85.333333v128H312.917333v-128a85.333333 85.333333 0 0 1 85.333334-85.333333H597.333333v-157.013333a177.834667 177.834667 0 1 1 142.250667 0v157.013333z m-426.666667 284.501333H1024V1024H312.917333v-71.082667z" 
                fill="#ffffff" p-id="4962"></path></svg>
                <span style="margin-left: 3px;">批量审批</span>
            </el-button>
        </el-form-item>
      </el-form>
      <!-- Search end -->
  
      <!-- Table start -->
      <div >
        <ColumnSetting v-model:columnList="columnList" />
        <el-table
          ref="tableRef"
          v-loading="tableLoading"
          :border="true"
          class="bs-table"
          :data="tableData"
          row-key="id"
          :height="tableHeight"
          :header-cell-style="{textAlign: 'center'}"
          :cell-style="{textAlign: 'center'}"
        >   
            <el-table-column type="expand" fixed="">
                <template #default="props">
                    <table class="detailTable" v-if="props.row.detailList && props.row.detailList.length>0">
                        <tbody>
                            <tr>
                                <td style="width: 50px;">
                                    <el-checkbox  size="large" 
                                    :disabled="props.row.detailList.filter(item=>item.status!=1).length== 0" 
                                    @change="(checked)=>changeAll(checked,props.row.detailList)" />
                                    </td>
                                <td style="width: 100px;">手机号</td>
                                <td style="width: 100px;">状态</td>
                                <td style="width: 300px;">备注</td>
                                <td style="width: 140px;">操作</td>
                            </tr>
                            <tr v-for="(item,index) in props.row.detailList" :key="index">
                                <td>
                                    <el-checkbox  size="large" 
                                    :disabled="item.status == 1" 
                                    :model-value="checkedMethod(item.id)" 
                                     @change="(checked)=>itemChange(checked,item)" />
                                    </td>
                                <td>{{ item.studentPhone }}</td>
                                <td>
                                    <div v-if="item.status==-1">
                                        <el-tag type="info">已撤销</el-tag>
                                    </div>
                                    <div v-else-if="item.status==-2">  
                                        <el-tag type="danger">已驳回</el-tag>
                                    </div>
                                    <div v-else-if="item.status==0">  
                                        <el-tag type="warning">待审核</el-tag>
                                    </div>
                                    <div v-else-if="item.status==1">  
                                        <el-tag type="primary">已通过</el-tag>
                                    </div>
                                    <div v-else-if="item.status==2">  
                                `        <el-tag type="primary">已发送</el-tag>
                                    </div>
                                    <div v-else-if="item.status==3">  
                                        <el-tag type="primary">已完成</el-tag>
                                    </div>`
                                </td>
                                <td>{{ item.remark }}</td>
                                <td>
                                    <el-button  size="small" link type="success"  @click="approvalRow(item.id)" :disabled="item.status == 1 ">
                                        <svg t="1759979020367" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4843"
                                        width="1.2em" height="1.2em"><path d="M516.09088 61.64992c-110.88384 0-201.09312 89.63072-201.09312 199.79776 0 70.74304 37.90848 135.95136 98.21696 171.69408l-19.59424 157.40416H229.64224c-34.16064 0-61.95712 27.68896-61.95712 61.71648V781.26592c0 34.03264 27.79648 61.72672 61.95712 61.72672h564.70016c34.17088 0 61.97248-27.68896 61.97248-61.72672V652.2624c0-34.03264-27.8016-61.71648-61.97248-61.71648h-156.20096l-19.54816-157.17888c60.53376-35.69152 98.5856-100.98176 98.5856-171.92448 0.00512-110.16192-90.20928-199.79264-201.088-199.79264zM831.78496 893.57824H192.21504a34.38592 34.38592 0 0 0 0 68.77184h639.56992a34.38592 34.38592 0 0 0 0-68.77184z" 
                                            fill="#1296db" p-id="4844"></path></svg>
                                        <span style="margin-left: 3px;">审批</span>
                                    </el-button>
                                    <el-button  size="small" link type="primary"  @click="finalityRow(item.id)" :disabled="item.status == 3 ">
                                        <el-icon><CircleCheckFilled /></el-icon>
                                        完成
                                    </el-button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <p v-else style="text-align: center;">暂无详情数据</p>
                </template>
            </el-table-column>
          <el-table-column type="index" label="序号" width="80" fixed/>
            <template v-for="item in columnList" :key="item.prop">
                <el-table-column :prop="item.prop" :label="item.label"  :fixed="item.fixed" :sortable:="item.sortable" v-if="!item.hide && item.prop!='action'" :width="item.width">
                    <template #default="scope">
                        <template v-if="item.prop=='status'">
                        <div v-if="scope.row.status==-1">
                            <el-tag type="info">已撤销</el-tag>
                        </div>
                        <div v-else-if="scope.row.status==-2">  
                            <el-tag type="danger">已驳回</el-tag>
                        </div>
                        <div v-else-if="scope.row.status==0">  
                            <el-tag type="warning">待审核</el-tag>
                        </div>
                        <div v-else-if="scope.row.status==1">  
                            <el-tag type="primary">已通过</el-tag>
                        </div>
                        </template>
                        <template v-else-if="item.prop=='taxFlag'">
                            <span v-if="scope.row.taxFlag==1">是</span>
                        <span v-if="scope.row.taxFlag==0">否</span>
                        </template>
                        <template v-else-if="item.prop=='offsetFlag'">
                        <span v-if="scope.row.offsetFlag==1">买</span>
                        <span v-if="scope.row.offsetFlag==0">卖</span>
                        </template>
                        <template v-else>
                            <template v-if="item.prop=='remark'">
                                <el-tooltip class="box-item" effect="dark" :content="scope.row[item.prop]"
                                :teleported="true" popper-class="pc">
                                    <div class="multiRowText" style="width: 160px;margin: unset;">{{ scope.row[item.prop] }}</div>
                                </el-tooltip>
                            </template>
                            <template v-else>
                                {{ scope.row[item.prop] }}
                            </template>
                        </template>
                    </template>
                </el-table-column>
                <!-- <el-table-column fixed="right" label="操作" :width="item.width" v-else-if="!item.hide && item.prop=='action'">
                    <template #default="scope">
                        <el-button  size="small" link type="warning" @click="repeal(scope.row.id)" :disabled="scope.row.status != 0 ">
                            <svg t="1759992912341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5938" 
                            width="1em" height="1em"><path d="M223.300267 221.320533h410.555733c214.493867 0 388.437333 173.192533 388.437333 386.798934 0 213.674667-173.943467 386.8672-388.437333 386.8672H116.053333a64.580267 64.580267 0 0 1-64.7168-64.512c0-35.566933 29.013333-64.443733 64.7168-64.443734h517.802667a258.389333 258.389333 0 0 0 258.935467-257.911466 258.389333 258.389333 0 0 0-258.935467-257.8432h-415.061333L293.546667 424.823467a64.3072 64.3072 0 0 1-28.672 108.7488 64.853333 64.853333 0 0 1-62.941867-17.6128L19.114667 333.687467a64.375467 64.375467 0 0 1 0-91.204267L201.9328 60.074667a64.9216 64.9216 0 0 1 91.613867 0c25.258667 25.122133 25.258667 65.9456 0 91.136l-70.314667 70.0416z" 
                                fill="#dca770" p-id="5939"></path></svg>
                            <span style="margin-left: 5px;">撤销</span>
                        </el-button>
                        <el-button  size="small" link type="danger" @click="deleteRow(scope.row.id)" ><el-icon><Delete /></el-icon> 删除</el-button>
                    </template>
                </el-table-column> -->
            </template>
        </el-table>
        <pagination
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          small="small"
          disabled="disabled"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableTotal"
          @pagination="selectByPage"
        />
      </div>
      <AddOrUpdate ref="addOrUpdateRef" @flushTable="selectByPage"  />
      <el-dialog
        title="审批"
        v-model="visable"
        width="37%"
        :close-on-click-modal="false"
        :draggable="true"
        style="max-width: 600px;"
      >
        <div class="bs-dialog">
          <el-form
            ref="addRef"
            :model="approvalForm"
            label-width="auto"
            style="width: 95%;padding-left: 2%;text-align: left;"
          >
              <el-form-item label="审批: " prop="mode" id="mode">
                  <el-radio-group v-model="approvalForm.status">
                      <el-radio :value="-2"  border style="color: red;">驳回</el-radio>
                      <el-radio :value="1"  border style="color: #1b89fb;">通过</el-radio>
                  </el-radio-group>
              </el-form-item>
              <el-form-item label="备注:" >
               <el-input type="textarea" :rows="6" v-model="approvalForm.remark" placeholder="请输入审批备注"  clearable/>
              </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer" style="text-align: right;margin-right: 1%;">
            <el-button  size="small" @click="visable = false"> 取消 </el-button>
            <el-button  size="small" type="primary" @click="confirmEvent"> 保存 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  <script>
  import { selectByPage, deleteItem, approval } from '@/api/oss/advice.js'
  import { getAll } from '@/api/oss/student.js'
  import { mapState } from 'vuex'
  import AddOrUpdate from './addOrUpdate.vue'
  export default {
      components:{
        AddOrUpdate
      },
      data() {
          return {
            visable:false,
            tableTotal: 0,
            tableLoading: false,
            tableData: [],
            // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 500,
                instrumentCode:'',
                status:'',
            },
            columnList:[
            {prop:'instrumentCode',label:'合约代码',sortable:false,sort:1,hide:false,fixed:true,width:150},
            {prop:'content',label:'投资建议',sortable:false,sort:2,hide:false,fixed:false,width:750},
            {prop:'sendTime',label:'发送时间',sortable:false,sort:4,hide:false,fixed:false,width:150},
            {prop:'creatorName',label:'创建人',sortable:false,sort:4,hide:false,fixed:false,width:100},
            {prop:'createTime',label:'创建时间',sortable:false,sort:4,hide:false,fixed:false,width:150},
            ],
            tableHeight:(window.innerHeight - 380) + 'px',
            // 学员列表
            studentList:[],
            // 单个审核提交的入参对象
            approvalForm:{
                ids:[],
                status:"",
                remark:"",
            },
            // 批量审核列表
            approvalList:[],
          }
      },
      created() {
          // 列按照sort升序
          this.columnList = this.columnList.sort((a,b)=>a.sort-b.sort)
          this.selectByPage()
      },
      computed:{
          ...mapState(['amplify'])
      },
      mounted(){
          this.$nextTick(()=>{
              this.countTableHeight()
              // 获取所有学员信息
              getAll({}).then(res=>{
                if (res.code == 1) {
                    this.studentList = res.data
                }
              })
          })
      },
      methods: {
        finalityRow(id){
            this.$confirm("请确认是否完成 ?", "警告  ! ! !", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let param = {
                    ids:[id],
                    status:3,
                }
                approval(param).then(res=>{
                    if (res.code == 1) {
                        this.$message.success(res.message)
                        window.setTimeout(()=>{
                            this.visable = false
                            this.onSearch()
                        },300)
                    }
                })
            })
        },
        // 单个选中/取消
        itemChange(checked,row){
            if (row.status != 1) {
                if (checked == true) {
                    this.approvalList.push(row.id)
                } else {
                    this.approvalList = this.approvalList.filter(item=>item!=rowid)
                }
            }
        },
        // 判断当前checkbox是否选中
        checkedMethod(id){
            return this.approvalList.includes(id)
        },
        // 全选/取消
        changeAll(checked,rows){
            // 直选中待审核的
            let ids = rows.filter(item=>item.status != 1).map(item=>item.id)
            console.log("全选/取消的数组=",ids);
            // 选中事件
            if (checked == true) {
                this.approvalList.push(...ids)
            } else {
                // 取消选中
                this.approvalList = this.approvalList.filter(item=>!ids.includes(item))
            }
            console.log("全选/取消=",checked,rows)
            console.log("全选/取消后待提交的id数组=",this.approvalList)
        },
        repeal(id){
            this.$confirm("请确认是否撤销 ?", "警告  ! ! !", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let param = {
                    id:[id],
                    status:-1,
                }
                approval(param).then(res=>{
                    if (res.code == 1) {
                        this.$message.success(res.message)
                        window.setTimeout(()=>{
                            this.visable = false
                            this.onSearch()
                        },300)
                    }
                })
            })
            
        },
        // 提交审批
        confirmEvent(){
            approval(this.approvalForm).then(res=>{
                if (res.code == 1) {
                    // 审核成功 , 重置数据
                    this.approvalList=[]
                    this.approvalForm.ids = []
                    this.approvalForm.status = ""
                    this.approvalForm.remark = ""
                    this.$message.success(res.message)
                    window.setTimeout(()=>{
                        this.visable = false
                        this.onSearch()
                    },300)
                }
            })
        },
        deleteRow(id){
            this.$confirm("请确认是否删除 ?", "警告  ! ! !", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                deleteItem({id:id}).then(res => {
                    if (res.code == 1) {
                        this.$message.success(res.message)
                        // 重新获取数据
                        this.onSearch()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            })
        },
        // 打开新增弹窗事件
        openAddModal() {
            this.$refs.addOrUpdateRef.openModal(null)
        },
        approvalRow(id){
            this.visable = true
            this.approvalForm.ids = [id]
            this.approvalForm.status = ""
            this.approvalForm.remark = ""
        },
        approvalBatch(){
            this.visable = true
            this.approvalForm.ids = [...this.approvalList]
            this.approvalForm.status = ""
            this.approvalForm.remark = ""
        },
        // 搜索事件
        onSearch() {
            this.queryParams.pageNo = 1
            this.selectByPage()
        },
        // 分页查询事件
        selectByPage() {
            this.tableLoading = true
            selectByPage(this.queryParams).then((res) => {
                this.tableLoading = false
                if (res.code === 1) {
                    this.tableData = res.data.records
                    this.tableTotal = res.data.total
                }
            }).catch(() => {
                this.tableLoading = false
            })
        },
        // 表格高度
        countTableHeight(){
          let tableHeight = (window.innerHeight - 380) + 'px'
          // 计算搜索区域
          var searchContainerList =  document.getElementsByClassName("searchContainer")
          if (this.arrIsNotEmpty(searchContainerList) && this.arrIsNotEmpty(searchContainerList[0])) {
                    let searchContainerHeight = searchContainerList[0].offsetHeight
                    // header高度+面包屑高度+tab多标签页高度+tab多标签页底部margin的高度
                    let staticHeight = 60+38+30+15
                    if (this.amplify == true) {
                        // 放大后 , 就没有头部, 面包屑, tab多标签页了 , 预留70px给空白 , 并预留50px给分页
                        tableHeight = window.innerHeight - searchContainerHeight - 50 - 70 + 'px'
                    } else {
                        tableHeight = window.innerHeight - (staticHeight + searchContainerHeight) - 50 - 50 + 'px'
                    }
                    this.tableHeight = tableHeight
                }
        },
      },
      watch: {
          amplify(newValue,oldValue) {
              this.countTableHeight()
          },
      },
  }
</script>
<style lang="css" scoped>
    .multiRowText {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: auto;
    }
    :deep(.el-scrollbar) {
        text-align: left;
    }
    .detailTable  {
        border-collapse:collapse;
        width: max-content;
        margin-left: 0%;
        margin-top: 1%;
        margin-bottom: 1%;
    }
    .detailTable td{
        border:solid 1px #e3e3e3;
        text-align: center;
    }
    .detailTable tr {
        height: 30px;
    }
    .detailTable tr:first-child{
        font-size: 14px;
        background-color: aliceblue;
    }
</style>